<!-- 案件详情页 -->
<template>
	<view class="case-detail-box">
		<!-- 顶部的案件标题信息区域 -->
		<view class="case-title-box">
			<!-- 案件标题 -->
			<view class="case-title">{{ caseData.title }}</view>
			<view class="case-item">
				<text class="case-item-left">审理法院</text>
				:
				<text class="case-item-right">{{ caseData.trial_court }}</text>
			</view>
			<view class="case-item">
				<text class="case-item-left">案号</text>
				:
				<text class="case-item-right">{{ caseData.case_number }}</text>
			</view>
			<view class="case-item">
				<text class="case-item-left">案由</text>
				:
				<text class="case-item-right">{{ caseData.case_number }}</text>
			</view>
			<view class="case-item">
				<text class="case-item-left">裁判日期</text>
				:
				<text class="case-item-right">{{ caseData.referee_date }}</text>
			</view>
			<view class="case-item">
				<text class="case-item-left">审理程序</text>
				:
				<text class="case-item-right">{{ caseData.trial_procedure }}</text>
			</view>
			<view class="case-item">
				<text class="case-item-left">文书性质</text>
				:
				<text class="case-item-right">{{ caseData.doc_type }}</text>
			</view>
		</view>
		<!-- 案件信息区域 -->
		<!-- 关键词 -->
		<view class="case-title-box u-m-t-12">
			<view class="detail-title"><u-section title="关键词" color="#00C9B1" :right="false"></u-section></view>
			<view class="case-content">{{ caseData.keywords }}</view>
		</view>
		<!-- 相关人员信息 -->
		<view class="case-title-box u-m-t-12">
			<view class="detail-title"><u-section title="相关人员信息" color="#00C9B1" :right="false"></u-section></view>
			<view class="case-content">{{ caseData.relevant_info }}</view>
		</view>
		<!-- 相关法条 -->
		<view class="case-title-box u-m-t-12">
			<view class="detail-title"><u-section title="相关法条" color="#00C9B1" :right="false"></u-section></view>
			<view class="case-content">{{ caseData.relevant_legal }}</view>
		</view>
		<!-- 基本案情 -->
		<view class="case-title-box u-m-t-12">
			<view class="detail-title"><u-section title="基本案情" color="#00C9B1" :right="false"></u-section></view>
			<view class="case-content">{{ caseData.basic_case }}</view>
		</view>
		<!-- 原告诉称 -->
		<view class="case-title-box u-m-t-12" v-if="false">
			<view class="detail-title"><u-section title="原告诉称" color="#00C9B1" :right="false"></u-section></view>
			<view class="case-content"></view>
		</view>
		<!-- 被告辩称 -->
		<view class="case-title-box u-m-t-12" v-if="false">
			<view class="detail-title"><u-section title="被告辩称" color="#00C9B1" :right="false"></u-section></view>
			<view class="case-content"></view>
		</view>
		<!-- 法院查明 -->
		<view class="case-title-box u-m-t-12" v-if="false">
			<view class="detail-title"><u-section title="法院查明" color="#00C9B1" :right="false"></u-section></view>
			<view class="case-content"></view>
		</view>
		<!-- 法院认为 -->
		<view class="case-title-box u-m-t-12">
			<view class="detail-title"><u-section title="法院认为" color="#00C9B1" :right="false"></u-section></view>
			<view class="case-content">{{ caseData.court_think }}</view>
		</view>
		<!-- 裁判结果 -->
		<view class="case-title-box u-m-t-12">
			<view class="detail-title"><u-section title="裁判结果" color="#00C9B1" :right="false"></u-section></view>
			<view class="case-content">{{ caseData.result }}</view>
		</view>
		<view class="case-title-box u-m-t-12">
			<view class="detail-title"><u-section title="庭审人员" color="#00C9B1" :right="false"></u-section></view>
			<view class="case-content" v-html="caseData.court_info"></view>
			<!-- <u-parse class="case-content" :html="caseData.court_info"></u-parse> -->
		</view>

		<!-- 底部审判长等人员信息 -->
		<!-- <view class="case-title-box" v-if="false">
			<view class="case-item">
				<text class="case-jurors-text">审理长：{{  }}</text>
			</view>
			<block v-for="jurors in caseData.jurors" :key="jurors.id">
				<view class="case-item">
					<text class="case-jurors-text">人民陪审员：{{  }}</text>
				</view>
			</block>
			<view class="case-item">
				<text class="case-jurors-text">书记员：{{  }}</text>
			</view>
		</view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 案例数据对象
			caseData: {}
		};
	},
	onLoad(options) {
		this.getData(options.id);
	},
	methods: {
		async getData(id) {
			let res = await this.$u.api.SearchGetCaseItem({ id: id });
			if (!res) return;
			res.court_info = res.court_info.replace(/\r\n/g, "<br />")
			this.caseData = res;
			// console.log(res.court_info);
			// console.log(res);
		}
	}
};
</script>

<style lang="scss" scoped>
.case-detail-box {
	min-height: 100vh;
	background-color: #eeeeee;
	.case-title-box {
		background-color: white;
		padding: 20rpx 20rpx;
		border-top: 1rpx solid #eeeeee;
		.case-title {
			font-size: 30rpx;
			color: #141418;
			font-family: PingFang SC;
			font-weight: bold;
			margin-bottom: 15rpx;
		}
		.case-item {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			.case-item-left {
				display: inline-block;
				width: 4em;
				line-height: 40rpx;
				text-align: justify;
				text-align-last: justify;
			}
			.case-item-right {
				margin-left: 3em;
			}
		}
	}
}
.detail-title {
	display: flex;
	align-items: center;
	margin-top: 10rpx;
	margin-bottom: 30rpx;
}
.case-content {
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #141418;
}
.case-users-box {
	background-color: white;
	padding: 20rpx;
}
.case-jurors-text {
	font-size: 28rpx;
	line-height: 40rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #141418;
}
</style>
